<script>
import TitleA from "@/comps/comm/TitleA.vue";
import formBuilder from "@/comps/form/formBuilder";
import EzData from "@/comps/EzData.vue";
import apiProcessTemplate from "@/pages/v1/mes/ProcessTemplate/js/apiProcessTemplate";
import apiProcess from "@/pages/v1/mes/Process/js/apiProcess";
import EzBarCode from "@/comps/comm/EzBarCode.vue";
import apiPlan from "@/pages/v1/mes/Plan/js/apiPlan";
import VueQr from "vue-qr"

export default {
  components: {EzBarCode, EzData, TitleA,VueQr},
  data(){
    let startForm = formBuilder()
    startForm.addSearch("planId","计划号",12).setApi(apiPlan.urlChoice)
        .setApiLimit(10).setApiSearchKeys(["sn__regex"])
    startForm.addSelect("template","模版",12).setApi(apiProcessTemplate.urlChoice)
    startForm.addText("copy","页数",12).setTextTypeNumber()


    return {
      startForm,
      startFormData:{
        planId:0,
        planSn:"",
        template:0,
        copy:1,
      },
      paper:{
        processes:[],
      },
      formUpdateKey:"",
      plan:{},
      toPrint:[],
    }
  },
  mounted(){

  },
  methods:{
    getProcessAndPreview(){
      apiProcessTemplate.find(this.startFormData.template,(res)=>{
        if (res.data.processesIds.length>0){
          apiProcess.findBy({_where:{id__in:res.data.processesIds}},(res)=>{
            this.paper.processes = res
          })
        }
      })
    },
    preCreate(){
      if (!this.startFormData.template){
        this.$toast.error("请选择模板")
        return
      }
      if (!this.plan.id){
        this.$toast.error("请选择模板")
        return
      }
      this.toPrint = []
      //随机10-99整数
      let rnd = Math.floor(Math.random() * (99 - 10 + 1) + 10);
      for (let i = 0; i < this.startFormData.copy; i++) {
        let sn = `${rnd}.${this.plan.printCount + i}`
        this.toPrint.push(sn)
      }
      this.plan.printCount += this.startFormData.copy
      apiPlan.save(this.plan,(res)=>{
        this.plan = res.data
      })
    }
  },
  watch:{
    'startFormData.template'(){
      this.getProcessAndPreview()
    },
    'startFormData.planId'(){
      apiPlan.find(this.startFormData.planId,(res)=>{
        this.plan = res.data
        if (res.data.templateId *1 > 0){
          this.startFormData.template = res.data.templateId*1
          this.startFormData.planSn = res.data.sn
          this.formUpdateKey = Math.random()
        }
      })
    }
  }


}
</script>

<template>
<div class="pad5">
  <div class="bcf round3 pad10">
    <title-a>跟踪单打印</title-a>
  </div>
  <div class="flex-r flex-start">
    <div class="bcf round3 pad10 mart5" style="width: 500px;">
      <title-a>初始数据</title-a>
      <div class="mart10">
        <EzData :config="startForm" v-model="startFormData" :key="formUpdateKey"></EzData>
        <div>
          <mu-button small flat @click="startFormData.copy = 1 ; formUpdateKey = Math.random()">1</mu-button>
          <mu-button small flat @click="startFormData.copy = 5 ; formUpdateKey = Math.random()">5</mu-button>
          <mu-button small flat @click="startFormData.copy = 10 ; formUpdateKey = Math.random()">10</mu-button>
          <mu-button small flat @click="startFormData.copy = 50 ; formUpdateKey = Math.random()">50</mu-button>
          <mu-button color="primary" small flat @click="startFormData.copy += 10 ; formUpdateKey = Math.random()">+10</mu-button>
        </div>
      </div>
      <div class="tac mart10">
        <mu-button color="primary" @click="preCreate" flat>预览</mu-button>
        <mu-button color="primary" class="marl10"  v-print="'#print'">打印</mu-button>
      </div>
    </div>
    <div class="bcf round3 pad10 mart5 marl10" style="width: 200px;">

      <div class="padb10">
        <title-a>单据预览</title-a>
      </div>
      <div id="print" style="width: 152px;">
        <div style="page-break-after: always;" class="padt3 c0" v-for="sn in toPrint" :key="sn">
          <div class="flex-r flex-start">
            <vue-qr :text="`${plan.sn}.${sn}`" :margin="0" :size="50"></vue-qr>
            <div class="flex1 marl3" style="line-height: 10px;height: 10px; font-size: 10px;">
              <div class="c0 fwb">{{plan.sn}}</div>
              <div class="c0 fwb">{{sn}}</div>
              <div class="c0 fwb">{{plan.product}}</div>
            </div>
          </div>
<!--          <div class="c0 fwb" style="line-height: 16px;height: 16px;">{{sn}}</div>-->
          <div class="flex-r flex-wrap c0 flex1">
            <div class="flrc" style="font-size: 10px;" v-for="(item,index) in paper.processes" :key="index">
              <div style="width: 10px;height: 10px;" class="bdso bdc0 mar2">&nbsp;</div>
              <div class="c0">{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>
</template>

<style scoped>

</style>